<template>
  <div class="step-filter" v-if="config.derivedTag.request.labGrps.logicTyp">
    <div class="logic" v-if="config.derivedTag.request.labGrps.labs.length > 1">
      <el-form-item prop="logicalOperation">
        <el-select
          v-model="config.derivedTag.request.labGrps.logicTyp"
          @click.native="toggleOperation"
          disabled
          popper-class="factory-select"
          class="default"
        >
          <el-option label="且" value="and"></el-option>
          <el-option label="或" value="or"></el-option>
        </el-select>
      </el-form-item>
    </div>
    <div v-for="(item, index) in config.derivedTag.request.labGrps.labs" :key="index" class="filter-item">
      <el-form-item
        :prop="formNm + '.derivedTag.request.labGrps.labs.' + index + '.tagId'"
        :rules="{
          required: true,
          message: '标签不能为空',
          trigger: 'change'
        }"
      >
        <tag-selector :tagInfo="item" @confirm="confirmFilter($event, index)"></tag-selector>
      </el-form-item>
      <el-form-item
        :prop="formNm + '.derivedTag.request.labGrps.labs.' + index + '.operationType'"
        :rules="{
          required: true,
          message: '运算符不能为空',
          trigger: 'change'
        }"
      >
        <el-select v-model="item.operationType" class="operator" @change="changeType($event, item)">
          <el-option label="---" value=""></el-option>
          <el-option
            v-for="opera in operatorType('type' + item.valueType)"
            :key="opera.value"
            :label="opera.key"
            :value="opera.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :prop="formNm + '.derivedTag.request.labGrps.labs.' + index + '.operationValue'"
        :rules="{
          required: true,
          message: '值不能为空',
          trigger: 'change'
        }"
      >
        <funnel-filter-content :config="item" v-if="item.tagId"></funnel-filter-content>
        <el-input v-model="item.operationValue" disabled v-else></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-plus" plain circle size="mini" @click="addFilter(index)"></el-button>
      <el-button type="primary" icon="el-icon-close" plain circle size="mini" @click="removeFilter(index)"></el-button>
    </div>
  </div>
</template>

<script>
import operator from '@/views/modules/factory/operator'
import funnelFilterContent from '@/views/modules/factory/factory-content-item'
export default {
  components: {
    funnelFilterContent
  },
  props: {
    config: {
      type: Object,
      required: true,
      default: () => {}
    },
    formNm: {
      type: String,
      default: 'funnel'
    }
  },
  data() {
    return {}
  },
  methods: {
    operatorType(key) {
      return operator[key]
    },
    changeType(type, item) {
      item.oprator = type
      if (item.valueType == '4' || item.valueType == '5') {
        if (type === 'a<=x<b') item.operationValue = []
        else if (type === 8 || type === 9) item.operationValue = [1, '1']
        else item.operationValue = ''
      } else if (item.valueType == '6') {
        if (type === 'a<=x<b') item.operationValue = [1, 1]
        else item.operationValue = ''
      } else if (item.valueType == '7') {
        if (type === 'a<=x<b') item.operationValue = [1.0, 1.0]
        else item.operationValue = ''
      } else {
        item.operationValue = ''
      }
    },
    toggleOperation() {
      const logicTyp = this.config.derivedTag.request.labGrps.logicTyp
      this.config.derivedTag.request.labGrps.logicTyp = logicTyp === 'and' ? 'or' : 'and'
    },
    confirmFilter(item, index) {
      this.config.derivedTag.request.labGrps.labs[index].labTbl = item.labTbl
      this.config.derivedTag.request.labGrps.labs[index].labFldMap = item.labFldMap
      this.config.derivedTag.request.labGrps.labs[index].labId = item.assetCode
      this.config.derivedTag.request.labGrps.labs[index].tagId = item.assetId
      this.config.derivedTag.request.labGrps.labs[index].tagNm = item.assetNm
      this.config.derivedTag.request.labGrps.labs[index].valueType = item.valueType
      this.config.derivedTag.request.labGrps.labs[index].enums = item.enums
      this.config.derivedTag.request.labGrps.labs[index].datTyp = item.dbVal
    },
    addFilter(index = -1) {
      if (!this.config.derivedTag.request.labGrps.logicTyp) {
        this.config.derivedTag.request.labGrps = {
          logicTyp: 'and',
          level: 1,
          labs: [
            {
              labTbl: '',
              oprator: '',
              datTyp: '',
              logicTyp: 'and',
              labFldMap: '',
              dtTyp: '',
              labId: '',
              tagId: '',
              tagNm: '',
              isDerLabel: '0',
              valueType: '',
              operationType: '',
              operationValue: '',
              val: '',
              valLft: '',
              valRit: '',
              valArray: [],
              enums: []
            }
          ]
        }
      } else {
        const param = {
          labTbl: '',
          oprator: '',
          datTyp: '',
          logicTyp: 'and',
          labFldMap: '',
          dtTyp: '',
          labId: '',
          tagId: '',
          tagNm: '',
          isDerLabel: '0',
          valueType: '',
          operationType: '',
          operationValue: '',
          val: '',
          valLft: '',
          valRit: '',
          valArray: [],
          enums: []
        }
        if (index < 0) this.config.derivedTag.request.labGrps.labs.push(param)
        else this.config.derivedTag.request.labGrps.labs.splice(index + 1, 0, param)
      }
    },
    removeFilter(index) {
      this.config.derivedTag.request.labGrps.labs.splice(index, 1)
      this.$emit('deleteFilter')
    }
  }
}
</script>

<style lang="scss">
.step-filter {
  padding-left: 55px;
  position: relative;
  .el-form-item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 15px;
  }
  .el-form-item__content {
    // height: 28px !important;
    line-height: normal;
  }
  .el-input__inner {
    width: 120px;
    height: 28px;
    line-height: 28px;
    color: #6a86cc;
    background-color: #e6eeff;
    &:hover {
      border-color: #6a86cc;
    }
  }
  .operator .el-input__inner {
    width: 90px;
  }
  .el-input__icon {
    line-height: 28px;
  }
  .filter-item {
    .el-button {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      padding: 1px;
      display: none;
    }
    & + .filter-item {
      margin-top: 10px;
    }
    &:hover {
      .el-button {
        display: inline-block;
      }
    }
  }
  .logic {
    font-size: 12px;
    width: 55px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    .el-form-item {
      position: absolute;
      top: calc(50% - 10px);
      left: 10px;
      margin-top: -12.5px;
    }
    .el-form-item__content:hover .el-input__inner {
      color: #6a86cc;
      border-color: #6a86cc;
    }
    .el-input__suffix {
      display: none;
    }
    .el-input__inner {
      font-size: 12px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      padding: 0 !important;
      text-align: center;
      background-color: #fff !important;
      cursor: pointer !important;
    }
    .el-input.is-disabled .el-input__inner {
      color: #666;
    }
    &:before {
      width: 20px;
      height: calc(50% - 20px);
      content: '';
      border-width: 3px;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      position: absolute;
      top: 8px;
      bottom: 50%;
      left: 22.5px;
    }
    &:after {
      width: 20px;
      height: calc(50% - 32.5px);
      content: '';
      border-bottom: 1px solid #ddd;
      border-left: 1px solid #ddd;
      position: absolute;
      bottom: 30px;
      left: 22.5px;
    }
  }
  .el-date-editor.el-input,
  .el-date-editor .el-input__inner {
    width: 130px;
  }
  .el-input-number {
    width: 130px;
    .el-input__inner {
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .el-range-editor {
    width: 156px;
    .el-range-separator {
      width: 25px;
      line-height: 28px;
    }
    .el-range-input {
      margin-top: 5px;
      background-color: transparent;
    }
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none;
  }
}
</style>
